<template>
  <view
    class="head"
    :style="headStyle"
  >
    <view
      @click="back"
      v-if="!hideArrow"
      class="left-content"
    >
      <slot name="left">
        <image
          class="left"
          v-if="color == '#333333'"
          src="../../static/Head_back.png"
        ></image>
        <image
          class="left"
          v-else
          src="../../static/head_back_white.png"
        ></image>
      </slot>
    </view>
    <view
      class="left-content"
      v-else
    ></view>
    <!-- #ifdef MP-WEIXIN -->
    <text class="center">{{ title }}</text>
    <!-- #endif -->
    <!-- #ifndef MP-WEIXIN -->
    <text
      class="center"
      :style="txtStyle"
      >{{ title }}</text
    >
    <!-- #endif -->
    <view
      class="right"
      @click="clickRight"
    >
      <slot name="right">
        <text></text>
      </slot>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    transparency: {
      type: Number,
      default: 0,
    },
    color: {
      type: String,
      default: "#333333",
    },
    backgroundColor: {
      type: Array,
      default: () => {
        return [255, 255, 255];
      },
    },
    hideArrow: {
      type: Boolean,
      default: false,
    },
  },
  data: () => ({}),
  computed: {
    headStyle() {
      let bg = this.backgroundColor.join(",");
      return `background-color:rgba(${bg},${this.transparency})`;
    },
    txtStyle() {
      return `color:${this.color}`;
    },
  },
  methods: {
    back() {
      this.$emit("leftClick");

      var pages = getCurrentPages();
      if (pages.length === 1) {
        uni.switchTab({ url: "/" });
      } else {
        uni.navigateBack({});
      }
    },
    clickRight() {
      this.$emit("rightClick");
    },
  },
};
</script>

<style lang="scss" scoped>
.head {
  width: 750rpx;

  box-sizing: border-box;
  padding: 0 40rpx;

  /* #ifdef H5 */
  height: 100rpx;
  line-height: 100rpx;
  position: fixed;
  top: var(--status-bar-height);
  left: 0;
  /* #endif */

  /* #ifdef APP-PLUS */
  height: calc(var(--status-bar-height) + 100rpx);
  line-height: 100rpx;

  box-sizing: border-box;
  padding-top: var(--status-bar-height);

  position: fixed;
  top: 0;
  left: 0;
  /* #endif */

  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;

  z-index: 2;
}

.left-content {
  width: 40rpx;
  height: 100rpx;

  display: flex;
  justify-content: center;
  align-items: center;

  .left {
    width: 40rpx;
    height: 30rpx;
  }
}

.center {
  justify-self: center;
  font-size: 36rpx;
  font-family: "阿里巴巴普惠体 2.0 55 Regular", "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu;
  font-weight: 500;
  color: #333333;
}

.right {
  min-width: 40rpx;
  min-height: 30rpx;
}
</style>
